<template>
	<div>
		<NewSearchDetail v-model="visible" :title="title">
			<div class="cont-left">
				<div class="trash-base">
					<div class="detail-title border-bottom-spot">
						基本信息
					</div>
					<div class="base-cont flex j-between a-center">
						<div class="flex a-center">
							<img class="m-r-10" src="../../../../assets/main/collect_detail.png">
							<div class="item">
								<p style="font-size: 16px;color: #FFFFFF;">
									{{detail.bigTypeName}}-{{ detail.smallTypeName}}

								</p>
								<p>NO:<span style="color: #FFFFFF;">{{detail.number || '- -'}}</span><span
										class="status">{{detail.status || '- -'}}</span></p>
							</div>
						</div>
						<div class="item">
							<p class="line1" :title="detail.departName">
								所属机构:<span>{{ detail.departName || '- -' }}</span></p>
							<p class="line1" :title="detail.maintain">维护单位:<span>{{ detail.maintain || '- -' }}</span>
							</p>
						</div>
						<div class="item">
							<p>责任人:<span>{{ detail.principal || '- -' }}</span></p>
							<p>启用日期:<span>{{ detail.date ? detail.date.split(' ')[0] : '- -' }}</span></p>
						</div>
					</div>
					<div class="base-bottom">
						<Icon custom="i-icon icon-dizhi1" size="18" color="#eee" />
						<span>{{detail.site || '- -'}}</span>
					</div>
				</div>
				<div class="trash-left">
					<div class="left-img">
						<img :src="detail.picture ? detail.picture : collectPicture">
					</div>
					<div class="left-btns">
						<div class="left-btns-item"
							:style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
							@click.stop="onClickVideo">
							<Icon custom="i-icon icon-jiankong11" size="22" />
							摄像头
						</div>
					</div>
				</div>
			</div>

			<div class="cont-right">
				<div class="right-bottom">
					<div class="bottom-work">
						<div class="border-bottom-spot detail-title bottom-work-img">
							今日实况
						</div>
						<div class="noScroll bottom-work-cont">
							<!-- <div class="case-title">收集/转运情况</div> -->
							<div class="case-cont">
								<div class="case-cont-item">
									<div class="item-left">
										<Icon custom="i-icon icon-shoujiliang" size="34" class="item-left-icon" />
										<div class="item-left-text">
											<p>处理量</p>
											<div><span>0</span>t</div>
										</div>
									</div>
									<div class="item-right">
										<p>处理车次</p>
										<p>{{todayCount}} 车次</p>
									</div>
								</div>
							</div>
							<div class="status-title">
								<span>压缩箱状态</span>
								<div class="status-title-list">
									<p>
										<span style="background-color: #1EB0FC;border-color: #1EB0FC;"></span>
										在位
									</p>
									<p>
										<span></span>
										满溢
									</p>
									<p>
										<span></span>
										空位
									</p>
								</div>
							</div>
							<div class="noData">
								<img src="../../../../assets/new/detail_no.png">
								<p>暂无设备</p>
							</div>
						</div>
					</div>
					<div class="bottom-calendar">
						<div class="border-bottom-spot detail-title bottom-work-img">
							异常日历
						</div>
						<div class="collect_calendar">
							<el-calendar v-model="workCalendar">
								<template slot="dateCell" slot-scope="{date, data}">
									<!-- 非当月 -->
									<div v-if="data.type != 'current-month'" @click.stop>
									</div>
									<!-- 当月 -->
									<div v-else class="cont"
										:class="{'day-after':isBeyondDate(data.day),'success':getCalendarDate(data.day) && getCalendarDate(data.day).sjCount > 0}"
										@click.stop="onClickCalendar(data.day)">
										<p>
											{{ data.day.split('-')[2]}}
										</p>
										<div class="cont-status"
											v-if="getCalendarDate(data.day) && (getCalendarDate(data.day).is_later_in != 0 || getCalendarDate(data.day).is_leave_early != 0 || getCalendarDate(data.day).is_no_work != 0)">
											<span class="err"></span>
										</div>
									</div>
								</template>
							</el-calendar>
							<!-- 日历弹框 -->
							<div class="case noScroll" v-if="calendarCaseVisible">
								<div class="case-date" @click.stop="calendarCaseVisible=false">
									<div class="bottom-work-img">
										{{modalDate}}
									</div>
									<Icon custom="i-icon icon-guanbi" size="18" />
								</div>
								<div class="case-cont">
									<div class="flex-1">
										<div class="item">
											<p class="">收集量</p>
											<div class="line"></div>
											<span class="no-equipment">暂无设备</span>
										</div>
									</div>
									<div class="flex-1">
										<div class="item">
											<p class="">收集次数</p>
											<div class="line"></div>
											<span>{{collectCount}}</span>
										</div>
									</div>
								</div>
								<div class="case-list p-20">
									<div class="m-b-10">报警异常</div>
									<div class="noData">
										<img src="../../../../assets/new/detail_no.png" style="margin-top: 0px;">
										<p>暂无异常</p>
									</div>
									<!-- <Timeline>
                    <TimelineItem>
                      <span class="time">14:28</span>
                      <p class="content">
                        垃圾桶
                        <span>满溢报警</span>
                        持续 1小时30分钟
                      </p>
                    </TimelineItem>
                    <TimelineItem>
                      <span class="time">14:28</span>
                      <p class="content">
                        垃圾桶
                        <span>满溢报警</span>
                        持续 1小时30分钟
                      </p>
                    </TimelineItem>
                    <TimelineItem>
                      <span class="time">14:28</span>
                      <p class="content">
                        垃圾桶
                        <span>满溢报警</span>
                        持续 1小时30分钟
                      </p>
                    </TimelineItem>
                    <TimelineItem>
                      <span class="time">14:28</span>
                      <p class="content">
                        垃圾桶
                        <span>满溢报警</span>
                        持续 1小时30分钟
                      </p>
                    </TimelineItem>
                    <TimelineItem>
                      <span class="time">14:28</span>
                      <p class="content">
                        垃圾桶
                        <span>满溢报警</span>
                        持续 1小时30分钟
                      </p>
                    </TimelineItem>
                  </Timeline> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</NewSearchDetail>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import NewSearchDetail from "./NewSearchDetail.vue";
	import {
		formatDate
	} from '@/utils/dateRangUtil'
	export default {
		components: {
			NewSearchDetail
		},
		data() {
			return {
				visible: false,
				dataId: '',
				title: '',
				detail: {},
				collectPicture: require('../../../../assets/main/collect-img.png'),
				workCalendar: new Date(),
				caledarArr: [],
				date: '',
				// 日历弹框
				calendarCaseVisible: false,
				modalDate: '',
				collectCount: '', // 收集次数
				todayCount: '', // 今日收集次数
			}
		},
		watch: {
			dataId(newVal) {
				if (newVal) {
					this.getDetail()
					this.getTrashCaledar()
				}
			},
			visible(newVal) {
				if (!newVal) {
					this.dataId = ''
					this.workCalendar = new Date()
					this.calendarCaseVisible = false
					this.date = formatDate(new Date())
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				bus.$on('showMainSearchCollectDetail', data => {
					this.dataId = data.id
					this.title = data.title
					this.visible = true
				})
				this.date = formatDate(new Date())
				// 日历组件上个月添加点击事件
				this.$nextTick(() => {
					// 点击前一个月
					let prevBtn = document.querySelector(
						'.collect_calendar .el-calendar__button-group .el-button-group>button:nth-child(1)');
					prevBtn.addEventListener('click', () => {
						this.onClickMonthList()
					})
				})
				// 日历组件下个月添加点击事件
				this.$nextTick(() => {
					// 点击后一个月
					let prevBtn = document.querySelector(
						'.collect_calendar .el-calendar__button-group .el-button-group>button:last-child');
					prevBtn.addEventListener('click', () => {
						this.onClickMonthList()
					})
				})
			},
			getDetail() {
				this.$store.dispatch('getFacilityDetail', this.dataId).then(res => {
					this.detail = res
					if (this.detail.status == 0) {
						this.detail.status = '正常'
					} else if (this.detail.status == 1) {
						this.detail.status = '废弃'
					} else if (this.detail.status == 2) {
						this.detail.status = '维修'
					} else if (this.detail.status == 3) {
						this.detail.status = '拆除'
					} else if (this.detail.status == 4) {
						this.detail.status = '暂停'
					}
				})
			},
			// 作业日历点击上月下月触发
			onClickMonthList() {
				this.date = formatDate(this.workCalendar)
				this.getTrashCaledar()
			},
			// 获取日历
			getTrashCaledar() {
				let params = {
					id: this.dataId,
					date: this.date + ' 00:00:00'
				}
				this.$http.getMapTrashCaledar(params).then((res) => {
					if (res.code === 200) {
						this.caledarArr = res.result
						this.todayCount = this.caledarArr.find(item => item.date == formatDate(new Date())).sjCount
					}
				})
			},
			// 点击日历某一天
			onClickCalendar(date) {
				if (!this.isBeyondDate(date)) {
					let data = this.caledarArr.find(item => item.date == date)
					this.collectCount = data.sjCount
					this.modalDate = date
					this.calendarCaseVisible = true
				}
			},
			// 是否超出日期
			isBeyondDate(date) {
				return formatDate(new Date()) < date
			},
			getCalendarDate(date) {
				return this.caledarArr.find(item => item.date == date)
			},
			// 摄像头
			onClickVideo() {
				if (this.detail.videoonlinestatus == 0) {
					let params = {
						equipcode: this.detail.equipcode,
						eqptype: this.detail.eqptype,
						details: this.detail.channels,
					}
					bus.$emit('showPlayVideoModal', params)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/iviewCssReset/input";
	@import "@/scss/iviewCssReset/elCalendar";

	.cont-left {
		width: 748px;
		height: 233px;
		background-image: url(../../../../assets/new/detail_233.png);
		background-size: 100% 100%;
	}

	.cont-right {
		width: 440px;
	}

	// 左侧
	.trash-left {
		width: 748px;
		height: 550px;
		background-image: url(../../../../assets/new/detail_712.png);
		background-size: 100% 100%;
		margin-top: 11px;

		.left-img {
			display: flex;
			justify-content: center;
			padding: 0 30px;
			width: 100%;

			img {
				max-width: 680px;
				height: 300px;
				margin: 65px;
			}
		}

		.left-btns {
			display: flex;
			justify-content: space-around;
			margin: auto;

			.left-btns-item {
				width: 120px;
				height: 45px;
				color: #FFFFFF;
				background: rgba(30, 176, 252, 0.35);
				border: 1px solid #1EB0FC;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	// 右侧基础信息
	.trash-base {
		overflow: hidden;

		.base-cont {
			height: 110px;
			padding: 0 30px;
			display: flex;

			img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}

			.item {
				height: 60px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				p {
					color: #999999;

					span {
						color: #fff;
						margin-left: 5px;
					}
				}
			}

			.status {
				background: rgba(30, 176, 252, 0.35);
				border: 1px solid #1EB0FC;
				color: #1EB0FC !important;
				border-radius: 4px;
				display: inline-block;
				width: 50px;
				height: 24px;
				margin-left: 15px !important;
				font-size: 12px;
				line-height: 24px;
				text-align: center;
			}
		}

		.base-bottom {
			display: flex;
			align-items: center;
			height: 58px;
			padding-left: 30px;
			color: #FFFFFF;
			font-size: 16px;

			span {
				margin-left: 4px;
			}
		}
	}

	.cont-right {
		.right-bottom {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.bottom-work {
				width: 454px;
				height: 410px;
				background-image: url(../../../../assets/new/detail_466.png);
				background-size: 100% 100%;

				.bottom-work-cont {
					// height: 435px;
					height: 300px;
					overflow-y: auto;

					.case-title {
						height: 32px;
						line-height: 32px;
						padding-left: 20px;
						background: rgba(255, 255, 255, 0.1);
						color: #eee;
					}

					.case-cont {
						padding: 0 20px;

						.case-cont-item {
							display: flex;
							justify-content: space-around;
							align-items: center;
							padding: 20px 0;
							border-bottom: 1px solid rgba(255, 255, 255, 0.2);

							.item-left {
								display: flex;
								align-items: center;

								.item-left-icon {
									width: 61px;
									height: 61px;
									line-height: 61px;
									text-align: center;
									border-radius: 61px;
									border: 1px solid rgba(255, 255, 255, 0.7);
									margin-right: 10px;
									color: rgba(255, 255, 255, 1);
								}

								.item-left-text {
									p {
										color: #eee;
									}

									div {
										color: #eee;

										span {
											font-size: 18px;
										}
									}
								}
							}

							.item-right {
								p:first-child {
									color: #ffffff;
								}

								p:last-child {
									width: 90px;
									height: 30px;
									line-height: 30px;
									font-size: 16px;
									color: #FFFFFF;
									font-weight: bold;
									text-align: center;
									background: rgba(30, 176, 252, 0.35);
									border: 1px solid #1EB0FC;
									border-radius: 18px;
									margin-top: 4px;
								}
							}
						}

						.case-cont-item:last-child {
							border: none;
						}
					}

					.status-title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 16px;
						margin: 0 6px;
						height: 40px;
						background: rgba(30,176,252, 0.1);

						span {
							color: #eee;
						}

						.status-title-list {
							display: flex;

							p {
								color: rgba($color: #fff, $alpha: 0.5);
								margin-left: 20px;
								display: flex;
								align-items: center;

								// border-left: 4px solid;
								// padding-left: 6px;
								// border-color: #666;
								span {
									width: 6px;
									height: 100%;
									margin-right: 6px;
									display: inline-block;
									border: 1px solid #666;
									background: #666;
								}
							}

							p:first-child span {
								border-color: rgb(20, 104, 83);
								background: rgb(20, 104, 83);
							}

							p:nth-child(2) span {
								border-color: rgb(169, 6, 19);
								background: rgb(169, 6, 19);
							}

							p:nth-child(3) span {
								border: 1px dotted #666;
								background: transparent;
							}
						}
					}

					.noData {
						height: 140px;
					}

					.status-list {
						padding: 20px;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						div {
							width: 30%;
							display: flex;
							justify-content: center;

							p {
								width: 58px;
								height: 34px;
								line-height: 34px;
								text-align: center;
								border-radius: 4px;
								margin-right: 4px;
								margin-bottom: 10px;
							}
						}

						.on {
							background: #1eab88;
							color: #eee;
						}

						.overflow {
							background: #a90613;
							color: #eee;
						}

						.off {
							border: 1px dashed #626262;
							color: #626262;
						}
					}
				}
			}

			.bottom-calendar {
				width: 454px;
				height: 374px;
				background-image: url(../../../../assets/new/detail_466.png);
				background-size: 100% 100%;
				margin-top: 6px;
				position: relative;

				.collect_calendar {
					.cont {
						.cont-status {
							.err {
								display: inline-block;
								width: 8px;
								height: 8px;
								border-radius: 8px;
								text-align: center;
								background: #eb6100;
							}
						}
					}

					.success {
						color: #fff;

						p {
							background: #25bb96;
						}
					}

					// 弹框
					.case {
						position: absolute;
						top: 0;
						left: 0;
						width: 454px;
						height: 374px;
						background-image: url(../../../../assets/new/detail_rili_bgc.png);
						background-size: 100% 100%;
						overflow-y: auto;

						.case-date {
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #eee;
							line-height: 46px;
							padding:11px 20px 0 14px;

							i {
								cursor: pointer;
							}
						}

						.case-cont {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 60px;
							padding: 0 20px;
							margin: 0 6px;
							color: #e9eaed;
							border-bottom: 1px solid rgba(30,176,252,.6);

							.item {
								width: 180px;
								height: 40px;
								background-image: url(../../../../assets/new/detail_rili_line.png);
								background-size: 100% 100%;
								line-height: 40px;
								border-radius: 40px;
								display: flex;
								align-items: center;
								
								.line{
									width: 1px;
									height: 18px;
									background-color: #1EB0FC;
								}

								p {
									width: 50%;
									text-align: center;
									position: relative;
								}

								// p::before {
								// 	content: "";
								// 	width: 1px;
								// 	height: 15px;
								// 	background: rgba($color: #fff, $alpha: 0.3);
								// 	position: absolute;
								// 	right: 0;
								// 	top: 10px;
								// }

								span {
									width: 50%;
									text-align: center;
								}

								.no-equipment {
									color: #1EB0FC;
								}
							}
						}

						.case-list {
							color: #eee;

							.time {
								padding: 0 3px;
								border-radius: 2px;
								background: #333333;
								position: relative;
								display: inline-block;
							}

							.content {
								margin-top: 10px;
							}

							::v-deep {
								.ivu-timeline-item-tail {
									border-left: 2px solid #2d2d2d;
								}

								.ivu-timeline-item-head-blue {
									border-color: #2d2d2d;
									color: #2d2d2d;
								}

								.ivu-timeline-item-head {
									background-color: #000000;
								}
							}
						}
					}
				}
			}
		}
	}

	.detail-title {
		line-height: 45px;
		color: #eee;
		font-size: 18px;
		padding-left: 20px;
	}

	.border-top-spot {
		// border-top: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	.border-top-spot::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		box-sizing: border-box;
		border-left: 3px solid #fff;
		border-right: 3px solid #fff;
		background: rgba(255, 255, 255, 0.1);
	}

	.border-bottom-spot {
		width: 206px;
		height: 46px;
		font-size: 16px;
		line-height: 46px;
		background-image: url(../../../../assets/new/detail_nav_206.png);
		background-size: 100% 100%;
		padding-left: 20px;
		margin: 14px 0 0 11px;
		// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	// .border-bottom-spot::before {
	// 	content: "";
	// 	position: absolute;
	// 	left: 0;
	// 	bottom: 0;
	// 	width: 100%;
	// 	height: 1px;
	// 	box-sizing: border-box;
	// 	border-left: 3px solid #fff;
	// 	border-right: 3px solid #fff;
	// 	background: rgba(255, 255, 255, 0.1);
	// }
	.bottom-work-img{
		width: 306px;
		height: 46px;;
		background-image: url(../../../../assets/new/detail_nav_306.png);
		background-size: 100% 100%;
		padding-left: 20px;
	}
	.noData{
		img{
			margin: 40px 0 0;
		}
	}
	::v-deep{
		.el-calendar{
			padding: 0 14px;
		}
		.el-calendar__header{
			padding: 6px 20px;
		}
		.el-calendar-table thead th {
		    padding: 8px 0 10px;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day {
		    height: 40px;
		}
	}
</style>
